<template>
  <div class="detailsMain">
    <h1>{{ data.dreamName }}</h1>
    <el-row>
      <!-- 左边图片及详情 -->
      <el-col :span="15" class="details-left" ref="detailsleft">
        <el-tabs type="card">
          <!-- 图片 -->
          <el-tab-pane label="活动主页"><img :src="data.dreamImage" :width="imgwidth + 'px'" :height="bodyheight * 0.65 + 'px'" /></el-tab-pane>
          <!-- 详情 -->
          <el-tab-pane label="活动详情">
            <el-row>
              <el-col :span="4">活动ID:</el-col>
              <el-col :span="20"><p>{{data.dreamId}}</p></el-col>
            </el-row>
            <el-row>
              <el-col :span="4">活动标签:</el-col>
              <el-col :span="20">
                <el-tag v-if="this.data.dreamTag1 == 1" style="float: left;">个人</el-tag>
                <el-tag v-if="this.data.dreamTag2 == 1" type="warning" style="float: left;">群体</el-tag>
                <el-tag v-if="this.data.dreamTag3 == 1" type="success" style="float: left;">学生</el-tag>
                <el-tag v-if="this.data.dreamTag4 == 1" type="success" style="float: left;">其它</el-tag>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">活动详情：</el-col>
              <el-col :span="20">{{ data.dreamIntroduce }}</el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <!-- 右边捐款信息 -->
      <el-col :span="9" class="details-right">
        <div id="detailsrightdiv">
          <!-- 金额显示 -->
          <div id="drdmoney">
            <div>
              <h2>目前筹集资金：</h2>
              <p class="current-money">¥{{ data.dreamAlreadyAmount }}.00</p>
              <p class="target-money">
                此活动希望在{{ data.dreamDeadline }}前筹集
                <em>{{ data.dreamTotalAmount }}</em>
                元！
              </p>
            </div>
          </div>
          <!-- 捐赠按钮 -->
          <div id="drdgift">
            <div>
              <el-progress :percentage="(this.data.dreamAlreadyAmount / this.data.dreamTotalAmount) * 100" :color="customColor" :format="format"></el-progress>
              <p class="drdgiftp1">本活动时间</p>
              <p class="drdgiftp2">{{ data.dreamCreateTime }} &nbsp;至&nbsp; {{ data.dreamDeadline }}</p>
            </div>
            <button class="drdbutton" @click="payto">立即支持</button>
          </div>

          <!-- 发起人信息 -->
          <div id="drduser">
            <getuser v-bind:userId="this.data.username"></getuser>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <el-tooltip class="item" effect="dark" content="点击查看或关闭" placement="top-start">
                <h2>更多详情</h2>
          </el-tooltip>
        </template>
        <div style="width: 60%;height: 500px;margin-left: 20%;"
            v-for="(item,index) of listImages" :key="index">
          <img :src="item.imageUrl" style="width: 100%;height: 100%;">
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import getuser from './getuser.vue'
  import {getdreamOne,getListImages} from 'network/dream.js'
export default {
  data() {
    return {
      activeNames: ['1'],
      customColor: '#409eff',
      input: '',
      imgwidth: '',
      bodyheight: '',
      data:'',
      listImages:[]
    };
  },
  props: ['dreamId'],
  created() {
    this.dreamOne()
    this.getImages()
  },
  components:{
    getuser
  },
  mounted() {
    // 对页面部分内容高度的修改
    this.imgwidth = this.$refs.detailsleft.$el.clientWidth;
    this.bodyheight = document.documentElement.clientHeight;
    let divheight = this.bodyheight * 0.65 + 20 + 'px';
    document.getElementById('detailsrightdiv').style.height = divheight;
    //修改部分数据
  },
  methods: {
    //跳转支付
    payto() {
     let cfPayTo= this.$router.resolve({
       path:"/dreampay",
       query:{
         dreamId:this.data.dreamId
       }
     });
     window.open(cfPayTo.href,'_blank')
    },
    //查看信息
    dreamOne(){
      getdreamOne(
        this.dreamId
      ).then(res=>{
        this.data=res
      }).catch(err => {
        console.log(err)
      });
    },
    //图片列表
    getImages(){
      getListImages(this.dreamId).then(res=>{
        this.listImages=res
      }).catch(err => {
        console.log(err)
      });
    },
    //进度条相关
    format(percentage) {
      return percentage === 100 ? '已完成' : `${percentage.toFixed(1)}%`;
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 25px;
  font-weight: bold;
}
/* 总体布局调整 */
.detailsMain {
  margin: 0 95px;
}
.el-tab-pane {
  width: 60%;
}
.details-right {
  margin-top: 40px;
}
.details-left img {
  padding: 5px 20px;
}
#detailsrightdiv {
  width: 100%;
  background-color: #eff7f9;
  border: 1px solid #e0e0e0;
}
/* 金额显示部分 */
#drdmoney {
  width: 100%;
  height: 30%;
}
#drdmoney div {
  padding-top: 5%;
  padding-left: 5%;
}
#drdmoney h2 {
  font-size: 16px;
  color: #666;
}
.current-money {
  font-size: 25px;
  color: #00cccf;
  font-weight: 700;
}
.target-money {
  color: #999;
  font-size: 14px;
  margin-top: 10px;
}
.target-money em {
  padding: 0 5px;
  color: #fe645a;
}
/* 捐赠 */
#drdgift {
  width: 100%;
  height: 45%;
  position: relative;
}
#drdgift div {
  top: 5%;
  left: 5%;
  width: 80%;
  position: relative;
  background-color: #fff;
}
.drdgiftp1 {
  margin-top: 10px;
  margin-left: 10px;
}
.drdgiftp2 {
  margin-left: 10px;
  margin-bottom: 10px;
}
#drdgift .el-input {
  width: 30%;
}
.drdbutton {
  margin-top: 25px;
  margin-left: 30px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 70%;
  height: 20%;
  line-height: 38px;
  font-weight: 700;
  color: #fff;
  background-color: #fe645a;
  font-size: 17px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  margin-bottom: 30px;
  border-bottom: 3px solid #ee514c;
}
/* 发起人信息 */
#drduser {
  width: 100%;
  height: 25%;
}
</style>
<style>
.el-dialog__body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
</style>
